<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form id="formEdit" action="customer/save" class="form-horizontal"
		role="form">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">操作</h4>
				</div>
				<div class="modal-body">

					<!-- 以下为要修改的的内容 -->

					<input type="hidden" name="id" data-th-value="${model.id}">

					<div class="form-group">
						<label for="txt_dept" class="col-sm-2 control-label">部门名称</label>
						<div class="col-sm-9">
							<input type="text" name="dept.id"
								data-th-value=${model.dept==null?null:model.dept.id}
								class="form-control" id="txt_dept" placeholder="部门">
						</div>
					</div>
					<div class="form-group">
						<label for="txt_name" class="col-sm-2 control-label">姓名</label>
						<div class="col-sm-9">
							<input type="text" name="name" data-th-value=${model.name}
								class="form-control" id="text_name" placeholder="姓名">
						</div>
					</div>
					<div th:if="${model.id==null}" class="form-group">
						<label for="txt_username" class="col-sm-2 control-label">用户名</label>
						<div class="col-sm-9">
							<input type="text" name="username"
								data-th-value=${model.username} class="form-control"
								id="txt_username" placeholder="用户名">
						</div>
					</div>
					<div th:if="${model.id!=null}" class="form-group">
						<label for="txt_username" class="col-sm-2 control-label">用户名</label>
						<div class="col-sm-9">
							<input type="text" name="username1"
								data-th-value=${model.username} readonly="readonly" class="form-control"
								id="txt_username" placeholder="用户名">
						</div>
					</div>
					<div class="form-group">
						<label for="txt_phone" class="col-sm-2 control-label">电话</label>
						<div class="col-sm-9">
							<input type="text" name="phone" data-th-value="${model.phone}"
								class="form-control" id="txt_phone" placeholder="电话">
						</div>
					</div>
					<div class="form-group">
						<label for="txt_email" class="col-sm-2 control-label">邮箱</label>
						<div class="col-sm-9">
							<input type="text" name="email" data-th-value="${model.email}"
								class="form-control" id="txt_email" placeholder="邮箱">
						</div>
					</div>
					<div class="form-group">
						<label for="txt_job" class="col-sm-2 control-label">职务</label>
						<div class="col-sm-9">
							<input type="text" name="job" data-th-value="${model.job}"
								class="form-control" id="txt_job" placeholder="职务">
						</div>
					</div>
					<div class="form-group">
						<label for="txt_role" class="col-sm-2 control-label">角色</label>
						<div class="col-sm-9">
							<select id="txt_userType" class="form-control selectpicker"
								name="roles" multiple>
								<option data-th-each="role:${roles}"
									data-th-value="${role.code}"
									data-th-selected="${#strings.contains(model.roleCodes,role.code)}"
									data-th-text="${role.name}">普通教师</option>
							</select>
						</div>
					</div>
					<!-- <div class="form-group">
                	<label for="txt_userType">角色</label>
                    <select id="txt_userType" class="form-control selectpicker" name="roles" multiple>
                		<option data-th-each="role:${roles}" data-th-value="${role.code}" data-th-selected="${#strings.contains(model.rolesCodeStr,role.code)}" data-th-text="${role.name}">普通教师</option>
                	</select>
                </div> -->

					<!-- 以上为要修改的内容 -->

				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-primary">
						<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
					</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">
						<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
					</button>
				</div>
			</div>
		</div>
	</form>
	<script type="text/javascript" th:inline="javascript">
		var options = {
			message : '验证不通过',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				name : {
					validators : {
						notEmpty : {
							message : '姓名不能为空'
						}
					}
				},
				username : {
					validators : {
						notEmpty : {
							message : '用户名不能为空'
						},
						stringLength: {
	                          min: 3,
	                          max: 11,
	                          message: '用户名字符长度在3~11之间'
	                      },
						threshold : 3, //有3字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，3字符以上才开始）
						remote : {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
							url : 'customer/yanz',//验证地址
							message : '该用户名已被注册',//提示消息
							delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
							type : 'POST',//请求方式
							data : {
								username : $('#txt_username').val()
							}
						}
					}
				}

			}
		};
		$('#formEdit').bootstrapValidator(options).on('success.form.bv',
				function(e) {
					e.preventDefault(); //很重要没有它则会提交默认表单，不会做下面的ajax表单提交
					var fd = new FormData($("#formEdit")[0]);
					var url = $('#formEdit').attr('action');
					$.ajax({
						url : url,
						type : "POST",
						data : fd,
						processData : false, // 不处理数据  
						contentType : false, // 不设置内容类型
						success : function(result) {
							if (result.success) {
								$('#myModal').modal("hide");
							} else {
								bootbox.alert(result.msg);
							}
						},
						error : function(result) {
							bootbox.alert("保存请求发送失败，请检查网络是否连通");
						}
					});
				});
		$(function() {
			$('#txt_dept').bootstrapCombotree({
				url : 'sysDept/treedata'
			});
			$('.selectpicker').selectpicker();
		});
	</script>

</body>
</html>